<template>
  <div class="wrap">
      <!-- 支付成功： -->
    <div class="bgWrap">
      <img src="@/assets/succeed.png" alt="" class="succeed" />
      <div class="resultText">订单支付成功</div>
      <div class="nextButton" @click="JumpNext">查看订单详情</div>
    </div>
    <div class="bgWrap" style="display:none;">
      <img src="@/assets/fail.png" alt="" class="succeed" />
      <div class="resultText">订单支付失败</div>
      <div class="nextButton" @click="JumpNext">重新支付</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      radio: "1",
    };
  },
  mounted() {
      document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
  },
  methods: {
    JumpNext() {
      this.$router.push({
        path: "/pages/checkRefuse",
        query: {
          //传递参数
        },
      });
    },
  },
  created() {},
  components: {},
};
</script>

<style scoped>
.bgWrap {
  width: calc(95% - 30px);
  padding: 20px 15px;
  margin: 14px auto;
  background: #ffffff;
  border-radius: 20px;
  text-align: center;
}
.succeed {
  width: 49px;
  height: 49px;
}
.resultText {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 400;
  color: #181818;
  text-align: center;
}
.nextButton {
  width: 123px;
  height: 34px;
  line-height: 34px;
  margin: 0 auto;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
</style>
